<template>
  <div class="container">
    <h1 @click="sayHi()">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  // 1.setup 是一个新的组件选项，作为组件中使用组合API的起点
  // 2.在组件实例创建之前vue2.x的beforeCreate执行
  // 3.这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
  // 4.模版中需要使用的数据和函数，需要在 setup 返回
  setup () {
    console.log(this);
    // 数据
    const msg = 'hi Vue3'
    // 方法
    const sayHi = () => {
      console.log('Hi Vue3!');
    }
    return { msg, sayHi }
  },
  beforeCreate () {
    console.log('1');
  }
}
</script>
